<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册账号</title>
		<!--引入jquery资源-->
		<script src="${basePath}static/add_resource/js/bootstrap-3.3.7-dist/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<!--引入bootstrap核心css-->
		<link rel="stylesheet" type="text/css" href="${basePath}static/add_resource/js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<!--引入bootstrap核心js-->
		<script src="${basePath}static/add_resource/js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 分页插件 -->
		<script type="text/javascript" src="${basePath }static/paginationjs-master-2.1.0/dist/pagination.min.js"></script>
		<link rel="stylesheet" type="text/css" href="${basePath }static/paginationjs-master-2.1.0/dist/pagination.css" />		
		
		<script type="text/javascript">
		function doAjaxQuery(pageNum){
			$.ajax({
				//请求类型
				type:"POST",
				//服务器url
				url:"${basePath }doSelectOp",
				//发送的数据
				data:$("#myForm").serialize(),
				//responseText转换的数据类型为json对象类型
				 dataType:"json",
				//成功之后回调方法，方法的参数是服务器响应的内容也就是ajax引擎获取到responseText内容
				success: function(data){
					//console.info("ajax:");
					//console.info(data);
						// ajax查询成功之后，调用分页插件进行分页处理 
						doPaging(pageNum,data);
				},
				eror:function(){
					alert("error...");
				}
			});
	}
		//进行分页操作
		function doPaging(pageNum,pageData){
			//默认是第一页
			if(!pageNum){
				//当前显示的页码
				pageNum = 1;
			}
			//加载分页插件，并进行初始化处理
			$('#myPage').pagination({
				dataSource:pageData, //显示的数据
				pageNumber:pageNum, //加载之后显示的页码
				pageSize:2, //每页显示的记录条数
				 showGoInput: true,
				 showGoButton: true,
				 // 分页之后的回调处理，用于显示分页的列表信息
				    callback: function(data, pagination) {
				        // data-当前页的数据
				        // 进行解析，并进行显示
				        dataTemplate(data);
				        // 分页控件的信息
				        //console.info("分页控件的信息");
				        //console.info(pagination);
				    }
			})
		}
		//表格数据显示处理
		function dataTemplate(data){
			var strContent = "";
			if (data) {
				 $.each(data,function(index,ev){
					 strContent +="<tr>";
					 strContent +="<th>";
					 strContent +=(index+1);
					 strContent +="</th>";
					 
					 strContent +="<td>";
					 strContent +=ev.opName;
					 strContent +="</td>";
					 
					 strContent +="<td>";
					 strContent +=ev.opRealName;
					 strContent +="</td>";
					 
					 strContent +="<td>";
					 strContent +=ev.opSex;
					 strContent +="</td>";
					 
					 strContent +="<td>";
					 strContent +=ev.opTel;
					 strContent +="</td>";
					 
					 strContent +="<td>";
					 strContent +=ev.opDot;
					 strContent +="</td>";
					 
					 strContent +="<td>";
					 strContent +=ev.opPower;
					 strContent +="</td>";
					 
					 strContent +="<td>";
					 strContent +=ev.createtime;
					 strContent +="</td>";
					 //修改按钮
					 strContent +="<td>";
					 strContent +="<a href='${basePath}doSelectMmodifyOpInfo?opId="+ev.opId+"'>修改</a>";
					 strContent +="</td>";
					 //删除按钮
					 strContent +="<td>";
					 strContent +="<a href='${basePath}doDeleteOpInfo?opId="+ev.opId+"'>删除</a>";
					 strContent +="</td>";
					 
					 strContent +="</tr>";
				 });	
		}
			 // 解析结果集完成之后，将需要显示的内容添加到dom控件中 （Ajax回调函数的局部刷新操作）
			 $("#querytbody").html(strContent);  
		     //console.info(data);
	}
		</script>
		
	</head>

	<body>
		<form class="form-horizontal" id="myForm" action="/doSelectOp" method="post">
			<div class="form-group">
			</div>
			<div class="form-group">
				<label for="opName" class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="opName" name="opName" placeholder="请输入用户名">
				</div>
				<label for="opRealName" class="col-sm-2 control-label">真实姓名</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="opRealName" name="opRealName" placeholder="请输入邮箱">
				</div>
			</div>
			<div class="form-group">
				<label for="txtSex" class="col-sm-2 control-label">性别</label>
				<div class="col-sm-3">
					<label class="radio-inline">
  						<input type="radio" name="opSex" id="opSex1" value="男"> 男
					</label>
					<label class="radio-inline">
						<input type="radio" name="opSex" id="opSex2" value="女"> 女
					</label>
					<label class="radio-inline">
						<input type="radio" name="opSex" id="opSex3" value=""> 性别不限
					</label>					
				</div>
				<label for="opTel" class="col-sm-2 control-label">电话</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="opTel" name="opTel" placeholder="请输入电话">
				</div>
			</div>
			<div class="form-group">
				<label for="opDot" class="col-sm-2 control-label">所属网点</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="opDot" name="opDot" placeholder="请输入所属网点">
				</div>
				<label for="txtName" class="col-sm-2 control-label">创建日期</label>
				<div class="col-sm-3">
					<input type="date" class="form-control" id="createtime1" name="createtime" placeholder="请输入创建时间">
					<input type="date" class="form-control" id="createtime2" name="createtime" placeholder="请输入创建时间">
				</div>
			</div>
			<div class="form-group">
				<label for="txtSex" class="col-sm-2 control-label">性别</label>
				<div class="col-sm-3">
					<label class="radio-inline">
  						<input type="radio" name="opPower" id="opPower1" value="0"> 操作员
					</label>
					<label class="radio-inline">
						<input type="radio" name="opPower" id="opPower2" value="1"> 管理员
					</label>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-4 col-sm-1">
					<button type="button" class="btn btn-default" onclick="doAjaxQuery();">提&nbsp;&nbsp;交</button>
				</div>
				<div class="col-sm-offset-1 col-sm-1">
					<button type="reset" class="btn btn-default">取&nbsp;&nbsp;消</button>
				</div>
			</div>
		</form>
<div class="bs-example" data-example-id="hoverable-table">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>序号</th>
          <th>用户名</th>
           <th>真实姓名</th>
          <th>性别</th>
           <th>电话</th>
            <th>所属网点</th>
             <th>权限</th>
             <th>创建时间</th>
             <th>修改</th>
             <th>删除</th>
        </tr>
      </thead>
      <tbody id="querytbody">
        
      </tbody>
    </table>
    <div id="myPage" class="data-container">
        
		</div>
  </div>
	</body>

</html>